<template>
  <child-page>
    <div class="components-form-demo-advanced-search">
      <a-form
        class="ant-advanced-search-form"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-item v-bind="formItemLayout" label="原贴标题/ID">
          <a-select
            v-decorator="[
              'posts_id',
              {
                rules: [{ required: true, message: '请选择原贴标题！' }]
              }
            ]"
            placeholder="请选择原贴标题！"
          >
            <a-select-option
              :value="item.id"
              v-for="(item, index) in initInfo.posts"
              :key="index"
            >
              {{ item.title }}/{{ item.id }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="评论人">
          <a-select
            v-decorator="[
              'member_id',
              {
                rules: [{ required: true, message: '请选择！' }]
              }
            ]"
            placeholder="请选择！"
          >
            <a-select-option
              v-for="(item, index) in initInfo.posterList"
              :key="index"
              :value="item.id"
            >
              {{ item.username }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="内容">
          <a-textarea
            :rows="9"
            v-decorator="[
              'comment',
              {
                rules: [
                  { required: true, message: '请输入内容！' },
                  {
                    validator: $validate.validateLength,
                    max: 140,
                    min: 1
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'center' }">
            <a-button type="primary" html-type="submit">
              提交
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </child-page>
</template>

<script>
import childPage from "@/components/childPageContent/index";
import validate from "@/tool/validateFunction";
import ATextarea from "ant-design-vue/es/input/TextArea";
export default {
  name: "add",
  components: {
    ATextarea,
    childPage
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      athList: [],
      statusOption: [{ label: "在用", value: 1 }, { label: "停用", value: 2 }],
      sexOption: [{ label: "男", value: 1 }, { label: "女", value: 2 }],
      rule: {
        nickName: [
          { required: true, message: "必填项" },
          { validator: validate.validateLength, max: 15, min: 1 }
        ],
        password: [{ required: true, message: "必填项" }],
        checkPsw: [{ required: true, message: "必填项" }],
        userName: [{ required: true, message: "必填项" }],
        email: [{ validator: validate.validateEmail }],
        phone: [{ validator: validate.validatePhoneNumber }],
        role: [{ required: true, message: "必填项" }]
      },
      initInfo: {
        status: 1,
        posts: [],
        posterList: []
      }
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          for (let item of this.initInfo.posterList) {
            if (item.id === values.member_id) {
              values.member_name = item.username;
            }
          }
          this.$ajax
            .post(this.$api.addComment, values)
            .then(() => {
              this.$notification.success({
                message: "操作成功"
              });
              this.$router.push({ name: "associationComment" });
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        } else {
          return false;
        }
      });
    },

    handleReset() {
      this.form.resetFields();
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    getInfo() {
      this.$ajax
        .get(this.$api.addComment, false)
        .then(res => {
          this.initInfo.posts = res.posts;
          this.initInfo.posterList = res.adminInfo;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
